<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="handleCancel"
    cancelText="关闭">
    <div v-if="onLineOrOffLine == 1">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <!--:disabled="depositPayModel != null ? true:false"-->
            <a-form-model-item label="客户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" :disabled="depositPayModel != null ? true:false" placeholder="请输入客户姓名" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="身份证号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cardNo">
              <a-input v-model="model.cardNo" :disabled="depositPayModel != null ? true:false" placeholder="请输入身份证号" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
              <a-input-number v-model="model.phone" :disabled="depositPayModel != null ? true:false" placeholder="请输入手机号码" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="项目地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
              <a-input v-model="model.address" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="合作协议有效期限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dataRange">
              <!-- <a-range-picker 
                @change="onChangeRangeDate" 
                style="width: 100%" 
                :disabled-date="disabledDate" 
                format="YYYY-MM-DD" 
                v-model="model.dataRange" />
               -->
                
                <van-cell title="选择日期区间" :value="model.dataRange" @click="showDataRange = true" />
                <van-calendar v-model="showDataRange" type="range" @confirm="onConfirm" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="定金金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="money">
              <a-input-number v-model="model.money" placeholder="请输入定金金额" :min = "0" style="width: 100%" ></a-input-number>
            </a-form-model-item>
          </a-col>
          <!--<a-col :span="24">
            <a-form-model-item label="签定时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="decidesTime">
              <j-date v-model="model.decidesTime" placeholder="请选择签定时间" :showTime="true" dateFormat="YYYY-MM-DD" style="width: 100%"/>
            </a-form-model-item>
          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="服务勾选" :labelCol="labelCol" :wrapperCol="wrapperCol" >
              <j-checkbox
                v-model="checkBox"
                :options="jCheckboxOptions"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div v-if="onLineOrOffLine == 2">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <!--:disabled="depositPayModel != null ? true:false"-->
            <a-form-model-item label="客户姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
              <a-input v-model="model.name" :disabled="depositPayModel != null ? true:false" placeholder="请输入客户姓名" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="身份证号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cardNo">
              <a-input v-model="model.cardNo" :disabled="depositPayModel != null ? true:false" placeholder="请输入身份证号" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="手机号码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="phone">
              <a-input-number v-model="model.phone" :disabled="depositPayModel != null ? true:false" placeholder="请输入手机号码" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <!--<a-col :span="24">
            <a-form-model-item label="项目地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
              <a-input v-model="model.address" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="合同编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="contractNo">
              <a-input v-model="model.contractNo" style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <!--<a-col :span="24">
            <a-form-model-item label="合作协议有效期限" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dataRange">
              <a-range-picker @change="onChangeRangeDate" style="width: 100%" :disabled-date="disabledDate" format="YYYY-MM-DD" v-model="model.dataRange" />
            </a-form-model-item>
          </a-col>-->
          <a-col :span="24">
            <a-form-model-item label="定金金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="money">
              <a-input-number v-model="model.money" placeholder="请输入定金金额" :min = "0" style="width: 100%" ></a-input-number>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </j-modal>
</template>

<script>
  import { postAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import JCheckbox from '@/components/jeecg/JCheckbox'
  import {getDepositInfo} from '@/api/api'
  import moment from 'moment';

  export default {
    name: 'addDepositPayModal',
    components: {
      JCheckbox,
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        showDataRange: false,
        title:'',
        width:'90%',
        visible: false,
        disableSubmit: false,
        detailedAddress:"",
        depositPayModel:{},
        model:{},
        startDate:'',
        endDate:'',
        currentCustomerId: 0,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        onLineOrOffLine: 0,
        confirmLoading: false,
        validatorRules: {
          name:[{required: true, message: '请输入客户真实姓名!'}],
          cardNo:[{required: true, message: '请输入身份证号!'}],
          phone:[{required: true, message: '请输入手机号'}],
          money:[{required: true, message: '请输入定金金额!'}],
          contractNo: [{required: true, message: '请输入合同编号!'}],
          dataRange: [{required: true, message: '请选择合同协议有效期限!'}],
          address:[{required: true, message: '请完善客户地址信息'}],
        },
        checkBox: '',
        jCheckboxOptions: [
          {label: '验房服务', value: '1'},
          {label: '量房服务', value: '2'},
          {label: '原始结构图绘制服务', value: '3'},
          {label: '平面方案设计服务', value: '4'},
          {label: '初始效果图设计服务', value: '5'},
          {label: '项目订单制作服务', value: '6'},
          {label: '专业硬装设计师', value: '7'},
          {label: '专业软装设计师', value: '8'},
          {label: '专业智能设计师', value: '9'},
          {label: '分享官权益', value: '10'},
          {label: '活动保留权益', value: '11'},
          {label: '7x24小时专属顾问', value: '12'}
        ],
        url: {
          add: "/ghDepositPay/add",
          edit: "/ghDepositPay/edit",
          queryById: "/ghDepositPay/queryById",
          getCustomerInfoById: '/ghCustomerInfo/getCustomerInfoById',
          getDepositPayInfoByCustomerId: "/ghDepositPay/getDepositPayInfoByCustomerId",
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      onConfirm(date){
        const [start, end] = date;
        this.showDataRange = false;

        function formatDate(obj) {
          return `${obj.getMonth() + 1}/${obj.getDate()}`;
        }


        this.model.dataRange = `${formatDate(start)} - ${formatDate(end)}`
        console.log(this.model)
      },
      disabledDate(current) {
        // 限制选择今天以后的日期，今天不可选
        //return current && current <= moment().endOf('day');
        // 限制选择今天及今天以后的日期
        return current && current < moment().subtract(1, 'days').endOf('day')
      },
      onChangeRangeDate(value,dateString){
        this.startDate = dateString[0];
        this.endDate = dateString[1];
      },
      add(customerId) {
        this.getDepositPayInfo(customerId)
        //this.getCustomerInfo(customerId);
        this.currentCustomerId = customerId;
        this.visible = true;
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.model.customerId = record.id;
        this.visible = true;
        this.checkBox = this.model.protocol;
      },
      close () {
        this.visible = false;
        this.model = {};
        this.depositPayModel = {};
        this.checkBox = "";
      },
      handleOk() {
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            if (!this.validatePhone(this.model.phone)){
              return false
            }
            if (!this.validateWorkerIdCard(this.model.cardNo)){
              return false;
            }
            this.confirmLoading = true;
            delete this.model.id;
            delete this.model.createBy;
            this.model.customerId = this.currentCustomerId;
            //this.model.detailedAddress = this.detailedAddress;
            this.model.onlineOrOffline = this.onLineOrOffLine;
            this.model.contractType = 1;  //意向购买：定金合同
            if (this.onLineOrOffLine === 1){
              this.model.contractName = this.model.name+"-定金合同";
            }else {
              this.model.contractName = this.model.name+"-定金合同-线下";
            }
            this.model.protocol = this.checkBox;
            this.model.periodOfValidityBegin = this.startDate;
            this.model.periodOfValidityEnd = this.endDate;
            postAction(this.url.add,this.model).then((res)=>{
              if(res.success){
                this.$message.success(res.message);
                this.$emit('ok');
                this.close()
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
              this.confirmLoading = false;
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
      getCustomerInfo(customerId) {
        getAction(this.url.getCustomerInfoById, {
          id: customerId
        }).then((res) => {
          if (res.success) {
            this.model = res.result;

            if (this.model.provinceCode != null && this.model.address != null){
              this.model.address = this.model.provinceCode + this.model.cityCode + this.model.areaCode + this.model.townshipCode + this.model.address;
              //this.detailedAddress = this.model.provinceCode +"#"+ this.model.cityCode +"#"+ this.model.areaCode +"#"+ this.model.townshipCode +"#"+ this.model.address;
            }else {
              this.model.address = "";
            }
            if (this.depositPayModel != null && (typeof (this.depositPayModel) == "undefined")){
              this.model.name = this.depositPayModel.name;
              this.model.phone = this.depositPayModel.phone;
              this.model.cardNo = this.depositPayModel.cardNo;
              this.model.address = this.depositPayModel.address;
            }
          }
        })
      },
      getDepositPayInfo(customerId){
        getAction(this.url.getDepositPayInfoByCustomerId, {
          customerId: customerId,
          contractType: 2
        }).then((res) => {
          if (res.success) {
            this.depositPayModel = res.result;
          }else {
            this.depositPayModel = null;
          }
        })
        this.getCustomerInfo(customerId);
      },
      validatePhone(value){
        let regs = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;// 11位手机
        if (!regs.test(value)) {
          this.$message.error("手机号码格式不正确，请重新输入");
          return false;
        }else {
          return true;
        }
      },
      validateWorkerIdCard(value){
        const regPsidno = /^\d{17}\w{1}$/
        if (!regPsidno.test(value)) {
          this.$message.error("身份证号长度输入有误，请重新输入");
          return false
        }
        const province = { 11: '北京', 12: '天津', 13: '河北', 14: '山西', 15: '内蒙古', 21: '辽宁', 22: '吉林', 23: '黑龙江 ', 31: '上海', 32: '江苏', 33: '浙江', 34: '安徽', 35: '福建', 36: '江西', 37: '山东', 41: '河南', 42: '湖北 ', 43: '湖南', 44: '广东', 45: '广西', 46: '海南', 50: '重庆', 51: '四川', 52: '贵州', 53: '云南', 54: '西藏 ', 61: '陕西', 62: '甘肃', 63: '青海', 64: '宁夏', 65: '新疆', 71: '台湾', 81: '香港', 82: '澳门', 91: '国外' }
        if (!province[Number(value.slice(0, 2))]) {
          this.$message.error("身份证号码格式不正确，请重新输入");
          return false
        }
        return true;
      },
    }
  }
</script>

<style scoped>
.van-cell{
  padding: 5px 10px;
  border: 1px solid #d9d9d9;
}
</style>